<template>
  <div class="app">
    <h1 class="title">App组件</h1>
    <hr />
    <!-- 如果组件里面有异步任务的话，就需要使用Suspense -->
    <Suspense>
      <!-- 需要使用插槽实现 -->
      <template v-slot:default>
        <Child></Child>
      </template>
      <!-- 使用插槽的话，因为如果上面的组件没有成功加载的话，就可以使用fallback插槽 -->
      <template v-slot:fallback>
        <h1>加载中......</h1>
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts" name="App">
import Child from '@/components/Child.vue'
</script>

<style scoped>
.app {
  background-color: #dab649;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 10px;
}
</style>
